import React from 'react';
import { Card, Row, Col, Form, Input, Button, Select } from 'antd';
import { ONLINESTATUS } from 'configs/constants';
// import { nextTick } from 'utils/nextTick';

const Option = Select.Option;

const formItemLayout = {
    labelCol: {
        span: 8
    },
    wrapperCol: {
        span: 16
    }
};
const btnItemLayout = {
  labelCol: {
      span: 0
  },
  wrapperCol: {
      offset: 8,
      span: 16
  }
};
const FormItem = Form.Item;

class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }

    renderBtn() {
        const { add, form, onSearch } = this.props;
        return (
          <FormItem
            {...btnItemLayout}
          >
            <Button
              type="primary" 
              onClick={() => onSearch(form.getFieldsValue())}
            >搜索</Button>
            <Button
              htmlType="reset" 
              style={{ marginLeft: 20 }}
              onClick={() => {
                    form.resetFields();
                    onSearch(form.getFieldsValue());
                }}
            >重置</Button>
            <Button 
              type="primary" 
              style={{ marginLeft: 20 }}
              onClick={() => add()}
            >新增</Button>
          </FormItem>
        );
      }
    
    render(){
        const { form } = this.props;
        const { getFieldDecorator } = form;
        return (
          <Card>
            <Form layout="horizontal">
              <Row gutter={16}>
                <Col span="8">
                  <FormItem
                    label="用户名"
                    {...formItemLayout}
                  >
                    {getFieldDecorator('name', {
                        initialValue: ''
                      })(<Input placeholder="请输入用户名" />)
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem
                    label="手机号"
                    {...formItemLayout}
                  >
                    {getFieldDecorator('phone', {
                        initialValue: ''
                      })(<Input placeholder="请输入手机号" />)
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem
                    label="状态"
                    {...formItemLayout}
                  >
                    {getFieldDecorator('status', {
                        initialValue: undefined
                      })(
                        <Select
                          placeholder='请选择是否开启'
                        >
                          {
                          Object.keys(ONLINESTATUS).map((item, key) => 
                            <Option value={item} key={item}>{ONLINESTATUS[item]}</Option>)
                          }
                        </Select>
                      )
                    }
                  </FormItem>
                </Col>
                <Col span="8">
                  {this.renderBtn()}
                </Col>
              </Row>
            </Form>
          </Card>
        );
    }
}

export default Form.create({})(SearchBar);